<template>
	<view class="body">
		<myHeader :title="title"></myHeader>
		<view class="mt-5 p-20">
			<view>
				<view class="mtb-40" style="display: flex;">
					<view class="text-gray" style="flex: 0 0 30%;">名称</view>
					<view class="" style="flex: 0 0 70%">{{data.name}}</view>
				</view>
				<view class="mtb-40" style="display: flex;">
					<view class="text-gray" style="flex: 0 0 30%;">分数</view>
					<view class="" style="flex: 0 0 70%">{{data.score}}求是币</view>
				</view>
				<view class="mtb-40" style="display: flex;">
					<view class="text-gray" style="flex: 0 0 30%;">开始时间</view>
					<view class="" style="flex: 0 0 70%;">{{data.startTime}}</view>
				</view>
				<view class="mtb-40" style="display: flex;">
					<view class="text-gray" style="flex: 0 0 30%;">结束时间</view>
					<view class="" style="flex: 0 0 70%;">{{data.endTime}}</view>
				</view>
				<view class="mtb-40" style="display: flex;" v-if="data.status == 1">
					<view class="text-gray" style="flex: 0 0 30%;">执行人</view>
					<view class="" style="flex: 0 0 70%;">{{data.executorName}}</view>
				</view>
				<view class="mtb-40">
					<view class="text-gray mtb-20">任务详情</view>
					<view v-if="fileUrlDetails == undefined">
						<view>暂无信息</view>
					</view>
					<view style="display: flex; justify-content: flex-start;">
						<view class="ml-40" v-if="fileUrlDetails != undefined" style="width: 100upx;height:100upx;"
							v-for="(item,index) in fileUrlDetails" :key="index">
							<image @click="$api(data.file)" style="width: 100upx;height:100upx;"
								src="/static/party_building/assets/files/files.png"></image>
						</view>
					</view>

				</view>
				
				<view class="mtb-40" v-if="data.status == 1">
					<view class="text-gray mtb-20">完成任务详情</view>
					<view v-if="finishUrls == undefined">
						<view>暂无信息</view>
					</view>
					<view style="display: flex; justify-content: flex-start;">
						<view class="ml-40" v-if="finishUrls != undefined" style="width: 100upx;height:100upx;"
							v-for="(item,index) in finishUrls" :key="index">
							<image @click="download(item)" style="width: 100upx;height:100upx;"
								src="/static/party_building/assets/files/files.png"></image>
						</view>
					</view>
				
				</view>

				<view class="mtb-40" style="display: flex;" v-if="states == 1">
					<view class="text-gray" style="flex: 0 0 30%;">完成任务</view>
					<view class="" style="flex: 0 0 70%;">
						<!-- 图片上传 -->
						<uni-file-picker :auto-upload="true" mode="list" file-mediatype="all" @select="select">
						</uni-file-picker>
						<progress v-if="progressVal != 0" activeColor="#4CAF50" :percent="progressVal"
							stroke-width="10"></progress>
					</view>
				</view>
			</view>


			<view class="mt-20 ">
				<button class="bg-red text-white" v-if="states == 0" @click="doTask">领取任务</button>
			</view>
			<view class="mt-20 ">
				<button class="bg-red text-white" v-if="states == 1" @click="submitForm">完成任务</button>
			</view>

		</view>
	</view>
</template>

<script>
	import myHeader from './../components/head.vue'
	import NetWorkTool from '@/api/netWorkTool'
	export default {
		data() {
			return {
				title: ' 悬赏任务详情',
				data: {},

				btnPattern: {
					buttonColor: '#e20909'
				},
				// 当前用户角色
				currentRoleCode: [],

				// 控制图片是否显示
				ctrlImg: {
					visible: true,
					msg: ""
				},
				oldData: {},
				// 文件上传后的url
				fileUrl: [],
				progressVal: 0,
				// 任务状态：0：待领取；1：带完成；2：已完成
				states: -1,
				// 登录用户的id
				userId: '',
				fileUrlDetails: [],
				finishUrls:[]
			}
		},
		onLoad: function(option) {
			this.oldData = JSON.parse(option.data)
		},
		mounted() {
			this.getLoginUserRoles();
			this.getDetail();
			console.log(this.finishUrls)
		},
		methods: {
			//  通过id查询详情
			getDetail() {
				NetWorkTool.POSTFORM(`/api/reward-task/detail`, {
					id: this.oldData.id
				}, true).then(res => {
					this.data = res;
					if (undefined != res.fileUrl ) {
						this.fileUrlDetails = res.fileUrl.split(',')
					}
					if (undefined == res.executor) {
						// 执行人为空，表明该任务未被领取
						this.states = 0
					}
					if (undefined != res.executor && this.userId == res.executor) {
						// 执行人id = 用户id，表明该用户领取了该任务
						this.states = 1
					}
					if (res.status == 1) {
						// 任务完成
						this.states = 2
						if (res.finishFileUrl != undefined) {
							this.finishUrls = res.finishFileUrl.split(',')
						}
					}
				})

			},
			// 领取任务
			doTask() {
				let param = {
					"executor": this.userId,
					"id": this.data.id,
				}
				NetWorkTool.POST('/api/reward-task/rob', param, false).then(res => {
					uni.showToast({
						title: '成功领取任务！',
						icon: 'none',
					});
					this.getDetail()
				})
			},
			// 完成任务
			submitForm() {
				this.getDetail()
				if (this.fileUrl.length <= 0) {
					uni.showToast({
						title: '请上传文件',
						during: 2000,
						icon:'none'
					})
					return;
				}
				let param = {
					"finishFile": this.fileUrl.toString(),
					"id": this.data.id,
					"executor": this.userId
				}
				NetWorkTool.POST('/api/reward-task/finishTask', param, false).then(res => {
					uni.showToast({
						title: '成功完成任务！',
						icon: 'none',
					});
					this.fileUrl = [];
					this.fileUrlDetails = [];
					uni.navigateTo({
						url: './index'
					})
				})
			},
			// 获取登录用户角色
			getLoginUserRoles() {
				// 获取登录用户的id
				let _this = this;
				uni.getStorage({
					key: 'user',
					success(e) {
						let arr = [];
						_this.userId = e.data.user.userId;
						for (let item of e.data.role) {
							if (null != item.roleCode) {
								_this.currentRoleCode.push(item.roleCode)
								if (item.roleCode == 'fl-leader') {
									_this.isLeader = true;
								}
							}
						}
					}
				})
			},
			// 获取上传状态
			select(e) {
				let source = e.tempFiles[0];
				let token = '';
				uni.getStorage({
					key: 'AuthToken',
					success(e) {
						token = e
					}
				})
				const uploadTask = uni.uploadFile({
					url: '/api/uploadFile', //仅为示例，非真实的接口地址
					filePath: e.tempFilePaths[0],
					name: 'file',
					header: {
						'x-access-token': token.data
					},
					formData: {
						'name': source.name,
						'size': source.size
					},
					success: (res) => {
						this.fileUrl.push(JSON.parse(res.data).data.id);
						uni.showToast({
							title:"上传成功",
							duration: 2000
						});
					}
				});
				uploadTask.onProgressUpdate((res) => {
					this.progressVal = res.progress;
				});
			},
			
			pageTo(val, id) {
				uni.navigateTo({
					url: val + "?id=" + id
				})
			},
			pageTo1(val, startMonthId, data) {
				console.log(data)
				uni.navigateTo({
					url: val + "?startMonthId=" + startMonthId + "&data=" + JSON.stringify(data)
				})
			},

			imageError: function(e) {
				this.ctrlImg.visible = false;
				this.ctrlImg.msg = '文件获取失败';
				uni.showToast({
					title: '图片获取失败',
					icon: 'none',
					duration: 2000
				});
			},
		},
		components: {
			myHeader
		},
	}
</script>

<style>
	@import url("/static/party_building/assets/style/federation.css");
</style>
